<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>注册</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css"/>
    <script src="./js/jquery.js"></script>
    <script src="lib/layer/layer.js"></script>
    <script src="js/base.js"></script>
    <style>
        button:disabled {
            background-color: #bbb;!important;
        }
    </style>
</head>
<body>
<div class="login_bg">
    <img class="logBg" src="./images/login.jpg" alt=""/>
    <div class="login_b">
        <div class="loginTab"><span class="tab">手机</span><span>邮箱</span></div>
        <div class="loginN" id="phone-box">
            <div class="error-box"></div>
            <form action="">
                <div class="user border_login" style="margin-top: 20px"><img src="./images/login_phone.png" alt=""/><input type="text" placeholder="请输入手机号" id="phone_num"/></div>
                <div class="user border_login"><img src="./images/login_password.png" alt=""/><input type="text" placeholder="请输入密码"/></div>
                <div class="user border_login"><img src="./images/login_password.png" alt=""/><input type="text" placeholder="请再次输入密码"/></div>
                <div class="yanCode">
                    <div class="yan border_login">
                        <img src="./images/login_yan.png" alt=""/>
                        <input type="text" placeholder="请输入验证码" id="phone_code"/>
                    </div>
                    <input class="loginR sendCode" type="button" value="发送验证码" id="sendCodeBtn"/>
                </div>
                <div class="automatic">
                    <span><input type="checkbox"/>勾选代表同意《用户注册和使用协议》</span>
                </div>
                <div class="loginBtn">
                    <button>注 册</button>
                </div>
                <div class="goRes"><a href="./login.html"><span style="color: #bbb;">已有账号去登录>></span></a></div>
            </form>
        </div>
        <div class="loginN" id="email-box" style="display: none;">
            <div class="error-box"></div>
            <form action="">
                <div class="user border_login" style="margin-top: 20px"><img src="./images/login_email.png" alt=""/><input type="text" id="email_num" placeholder="请输入邮箱号"/></div>
                <div class="user border_login"><img src="./images/login_password.png" alt=""/><input type="text" placeholder="请输入密码"/></div>
                <div class="user border_login"><img src="./images/login_password.png" alt=""/><input type="text" placeholder="请再次输入密码"/></div>
                <div class="yanCode">
                    <div class="yan border_login">
                        <img src="./images/login_yan.png" alt=""/>
                        <input type="text" id="email_code" placeholder="请输入验证码"/>
                    </div>
                    <input class="loginR sendCode" id="sendEmail" type="button" value="发送验证码"/>
                </div>
                <div class="automatic">
                    <span><input type="checkbox"/>勾选代表同意《用户注册和使用协议》</span>
                </div>
                <div class="loginBtn">
                    <button>注 册</button>
                </div>
                <div class="goRes"><a href="./login.html"><span style="color: #bbb;">已有账号去登录>></span></a></div>
            </form>
        </div>
    </div>
</div>
</body>
<script>

</script>
<script>
    $(document).on('click', '.xx', function () {
        $(this).parent().remove()
    });
    $('.loginTab span').click(function(){
        var index=$(this).index();
        $(this).addClass('tab').siblings().removeClass('tab');
        $(".loginN").eq(index).css("display","block").siblings(".loginN").css("display","none")
    })

    let PageClass = function () {
        this.init = function () {
            let _this = this;
            $('#sendCodeBtn').click(function (e) {
                _this.smsCode();
            });
            $("#phone-submit").click(function (e) {
                _this.modifyByPhone();
            });
            $('#sendEmail').click(function(e){
                _this.emailCode()
            });
        };
        this.smsCode = function () {
            let $phoneObj = $('#phone_num');
            let phone = $phoneObj.val();
            let _this = this;
            if (!this.checkPhone(phone)) {
                this.setErrorMsg('#phone-box', '手机格式不正确');
                $phoneObj.focus();
                return;
            }
            let btn = $('#sendCodeBtn');
            btn.attr('disabled', 'disabled');
            $.ajax({
                url: url + 'support/sms/verify',
                type: 'post',
                data: {phone: phone},
                dataType: 'json',
                success: function (res) {
                    console.log(res)
                    if (res.code === 400) {
                        _this.setErrorMsg('#phone-box', res.msg);
                        btn.removeAttr('disabled');
                    } else {
                        _this.disableButton(btn);
                    }
                }
            })
        }
        this.emailCode = function () {
            let $emailObj = $('#email_num');
            let email = $emailObj.val();
            console.log(email)
            let _this = this;
            if (!this.checkMail(email)) {
                this.setErrorMsg('#email-box', '邮箱格式不正确');
                $emailObj.focus();
                return;
            }
            let btn = $('#sendEmail');
            btn.attr('disabled', 'disabled');
            $.ajax({
                url: url + 'support/mail/verify',
                type: 'post',
                data: {mail: email},
                dataType: 'json',
                success: function (res) {
                    console.log(res)
                    if (res.code === 400) {
                        _this.setErrorMsg('#email-box', res.msg);
                        btn.removeAttr('disabled');
                    } else {
                        _this.disableButton(btn);
                    }
                }
            })
        }
            this.modifyByPhone = function () {
                let $phoneObj = $('#phone_num');
                let phone = $phoneObj.val();
                let _this = this;
                if (!this.checkPhone(phone)) {
                    this.setErrorMsg('#phone-box', '手机格式不正确');
                    $phoneObj.focus();
                    return;
                }
                let $code = $('#phone_code');
                let code = $code.val();
                if (!code) {
                    this.setErrorMsg('#phone-box', '请输入短信验证码');
                    $code.focus();
                    return;
                }
                let $password = $('#phone_pwd');
                let $password_confirm = $('#phone_pwd_confirm');
                let _password = $password.val();
                let _password_confirm = $password_confirm.val();
                if (!_password) {
                    this.setErrorMsg('#phone-box', '密码不能为空');
                    $password.focus();
                    return;
                }
                if (!_password_confirm || _password !== _password_confirm) {
                    this.setErrorMsg('#phone-box', '两次密码不一致');
                    $password.focus();
                    return;
                }
                let btn = $('#phone-submit');
                btn.attr('disabled', 'disabled');
//            $.post('{{route('auth.reset-pwd.phone')}}', {
//                'phone': phone,
//                'password': _password,
//                'password_confirmation': _password_confirm,
//                'code': code
//            }, function (e) {
//                btn.removeAttr('disabled');
//
//                if (e.code === 400) {
//                    _this.setErrorMsg('#phone-box', e.msg);
//                } else {
//                }
//            }, 'json');
            };
            this.checkPhone = function (value) {
                return /^1[3|4|5|8][0-9]\d{4,8}$/.test(value);
            };
            this.checkMail = function (value) {
                return /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(value);
            };
            this.disableButton = function (btn) {
                btn.val('60秒后重新获取');
                let time = 60;
                let interval = setInterval(function () {
                    time = time - 1;
                    if (time === 0) {
                        btn.removeAttr('disabled');
                        str = '重新发送验证码';
                        clearInterval(interval);
                        btn.css('backgroundColor','#ff9f42');
                    } else {
                        str = time + '秒后重新获取';
                        btn.css('backgroundColor','#bbb');
                    }
                    btn.val(str);
                }, 1000)
            };
            this.setErrorMsg = function (selector, value) {
                let boxError = $(selector).find('.error-box');
                str = '<div class="error"><span class="errorT">' + value + '</span><span class="xx">×</span></div>';
                boxError.html(str);
            };
            this.init();
            return this;
        };
    new PageClass();
</script>

</html>